<template>
  <div class="invitemanage page">
    <div class="van-image bg-img">
      <div class="van-image__error"><i class="van-badge__wrapper van-icon van-icon-photo-fail van-image__error-icon">
      </i></div>
    </div>
    <div class="van-nav-bar navbar">
      <div class="van-nav-bar__content">
        <div class="van-nav-bar__left" @click="$router.back()"><i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
        </i></div>
        <div class="van-nav-bar__title van-ellipsis">推广海报</div>
        <div class="van-nav-bar__right" @click="show = true"><p>分享</p></div>
      </div>
    </div>

    <div class="qrcode"><img class="imgbox" src="../../assets/img/tip/qr_border.png"
                             style="">
      <div ref="qrcode" class="qrcodeimg" id="qrcode">

      </div>
      <div class="info" style="">
        <div class="inviter">邀请人: {{ userInfo.username }}</div>
        <div class="invitecode">邀请码:<p>{{ userInfo.code }}</p></div>
      </div>
    </div>
    <div class="van-overlay" v-if="show" style="z-index: 2001; background-color: rgba(0, 0, 0, 0.5);"></div>
    <div class="van-popup van-popup--bottom" v-if="show" style="z-index: 2001; height: 40%;">
      <div class="invitebox">
        <div class="title"><p class="cancel">取消</p>
          <p class="codetxt">请选择一个推广码</p>
          <p class="confrim">确定</p></div>
        <div class="content">
          <div class="item">
            <div class="code">261793194</div>
            <div class="agentPoint">10%</div>
            <div class="extendType">默认注册</div>
            <i class="selected"></i></div>
        </div>
      </div>
    </div>
    <div class="shareImg" v-if="show"><img class="sharebg"
                                           src="https://154.209.80.193:20801/poster/sz2.png?1728395102310"
                                           crossorigin="anonymous">
      <div class="qrcodeimg sqrcode" id="sqrcode" title="261793194">
        <canvas width="50" height="50" style="display: none;"></canvas>
        <img alt="Scan me!"
             src=""
             style="display: block;"></div>
      <div class="opreator">
        <div class="save">保存到本地</div>
        <div class="close" @click="show = false">关闭</div>
      </div>
    </div>
    <div class="van-overlay"
         v-if="show"
         style="z-index: 2003; background-color: rgba(0, 0, 0, 0.5); animation-duration: 0s;">
    </div>
    <div class="van-popup van-popup--bottom" v-if="show" style="z-index: 2003; transition-duration: 0s; height: 40%;">
      <div class="shareItem">
        <input id="copyNode" type="hidden" :value="shareURL">
        <div class="img-item" @click="execCopy"><img
            src=""
        ><span>复制链接</span></div>
        <div class="img-item"><img
            src=""
        ><span>Facebook</span></div>
        <div class="img-item"><img
            src=""
        ><span>Line</span></div>
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcodejs2";
import {mapGetters} from "vuex";
import ClipboardJS from 'clipboard';

export default {
  name: "QRCode",
  computed: mapGetters(["userInfo"]),
  created() {
    let that = this;
    this.shareURL = window.location.protocol + "://" + window.location.host + "/register?activeCode=" + this.userInfo.code;
    this.$nextTick(function () {
      new QRCode(that.$refs.qrcode, {
        text: that.shareURL,
        width: 80,
        height: 80,
        colorDark: "#333333",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.L
      })
    })

    this.clipboard = new ClipboardJS('#copyNode', {
      text: trigger => {
        const codeStr = that.shareURL
        this.$notify({
          title: '成功',
          message: '推广链接已复制到剪切板，可粘贴。',
          type: 'success'
        })
        return codeStr
      }
    })
    this.clipboard.on('error', e => {
      this.$message.error('链接复制失败')
    })
  },
  destroyed() {
    this.clipboard.off('success');
    this.clipboard.off('error');
    this.clipboard.destroy();
  },
  data: function () {
    return {
      clipboard: undefined,
      shareURL: "",
      show: false,
    }
  },
  methods: {
    execCopy() {
      this.show = false;
      document.getElementById('copyNode').click()
    },
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.invitemanage {
  position: relative;
  bottom: 0
}

.invitemanage .bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

.invitemanage .navbar {
  position: absolute;
  top: 0;
  width: 100%;
  color: #fff;
  background: transparent
}

.invitemanage .qrcode {
  position: absolute;
  bottom: 20%;
  right: .26667rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #fff
}

.invitemanage .qrcode .qrcodeimg {
  position: absolute;
  top: .26667rem;
  left: .26667rem;
  background-color: #fff;
  padding: .13333rem
}

.invitemanage .qrcode .imgbox {
  width: 2.93333rem;
  height: 2.93333rem
}

.invitemanage .qrcode .info {
  width: 3.2rem;
  font-size: .37333rem;
  margin-left: .4rem;
  padding-left: .26667rem;
  background-color: rgba(0, 0, 0, .6)
}

.invitemanage .qrcode .info .invitecode, .invitemanage .qrcode .info .inviter {
  padding: .05333rem 0
}

.invitemanage .qrcode .info .invitecode {
  margin-top: .13333rem
}

.invitemanage .qrcode .info .btnChoose {
  color: #181818;
  font-weight: 500;
  letter-spacing: .05333rem;
  width: 2.66667rem;
  margin-top: .26667rem;
  padding: .05333rem .4rem;
  border-radius: .26667rem;
  background-color: #f7f7f7
}

.invitemanage .invitebox {
  font-size: .37333rem
}

.invitemanage .invitebox .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: .96rem;
  padding: .13333rem .13333rem;
  color: #fff;
  font-size: .42667rem;
  font-weight: 500;
  background: #fa59b5
}

.invitemanage .invitebox .title .cancel {
  margin: .05333rem .10667rem;
  font-size: .4rem;
  color: #f4ebf3;
  font-weight: 300
}

.invitemanage .invitebox .title .confrim {
  margin: .05333rem .10667rem;
  font-size: .4rem;
  color: #f4ebf3;
  font-weight: 400
}

.invitemanage .invitebox .content .item {
  padding: .26667rem .8rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  color: #979799;
  background: transparent
}

.invitemanage .invitebox .content .item-choose {
  color: #fa59b5;
  background-color: #fff;
  border: .02667rem solid #fa59b5
}

.invitemanage .invitebox .content .selected {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #fa59b5;
  font-size: 1.06667rem
}

.invitemanage .shareImg {
  z-index: 3000;
  position: absolute;
  top: 10%;
  left: 15%;
  right: 15%;
  bottom: 25%;
  height: 10.66667rem
}

.invitemanage .shareImg .sharebg {
  border-top-right-radius: .26667rem;
  border-top-left-radius: .26667rem;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-border-image: none;
  border-image: none
}

.invitemanage .shareImg .sqrcode {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  right: .26667rem;
  bottom: .26667rem;
  background-color: #fff;
  padding: .13333rem;
  border-radius: .13333rem
}

.invitemanage .shareImg .opreator {
  position: absolute;
  width: 100%;
  bottom: -1.04rem;
  font-size: .37333rem;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: .26667rem 0;
  border-bottom-right-radius: .26667rem;
  border-bottom-left-radius: .26667rem
}

.invitemanage .shareImg .opreator .save {
  font-weight: 500;
  color: #fa59b5
}

.invitemanage .shareImg .opreator .close {
  color: #979999
}

.invitemanage .shareItem {
  position: absolute;
  width: 100%;
  bottom: 1.33333rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around
}

.invitemanage .shareItem .img-item {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center
}

.invitemanage .shareItem .img-item img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 100%;
  margin-bottom: .13333rem
}

.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: #f5dcf1;
  transition: transform 0.3s;
  -webkit-overflow-scrolling: touch;
}
</style>
